<template>
  <!-- <div class="container"> -->
  <!-- 导航菜单栏 -->
  <!-- <nav-bar></nav-bar> -->
  <!-- 头部区域 -->
  <!-- <head-bar></head-bar> -->
  <!-- 主内容区域 -->
  <!-- <main-content></main-content> -->
  <!-- </div> -->
  <div class="homeMain">
    <div class="homeHeader" @click="firstFlag = false">
      <top-bar></top-bar>
    </div>
    <div class="homeContent">
      <div class="homeNav" :style="{'width':W+'px'}">
        <nav-aside @parentWidth="shrinkFun"  @setFirstFlag="firstFlagFun" :firstFlag="firstFlag"></nav-aside>
      </div>
      <div class="homeBody" :style="{'margin-left':W+'px'}" @click="firstFlag = false">
        <nav-bar></nav-bar>
        <main-content></main-content>
        <div class="homeFooter"></div>
      </div>
    </div>
  </div>
</template>

<script>
import HeadBar from "./HeadBar/HeadBar";
import NavBar from "./NavBar/NavBar";
import MainContent from "./MainContent/MainContent";
import navAside from "./Aside/index";
import topBar from "./topBar/index";
export default {
  components: {
    HeadBar,
    NavBar,
    MainContent,
    navAside,
    topBar
  },
  data() {
    return {
      W: 200,
      firstFlag:false
    };
  },
  methods: {
    shrinkFun(data) {
      this.W = data;
    },
    firstFlagFun(params) {
      this.firstFlag=params;
    }
  },
  mounted() {}
};
</script>

<style scoped lang="scss">
.homeMain {
  min-width: 1260px;
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
  .homeContent {
    height: calc(100% - 48px);
    .homeNav {
      float: left;
      height: 100%;
    }
    .homeBody {
      height: 100%;
      overflow: auto;
    }
    .homeBody::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
